一、前言

Gulp 是工作流程自動化的工具，可以幫我們處理一些需要重複執行的指令，像這類繁瑣的工作，可以交給 Gulp 來處理，在初學 Gulp 時，可以直接看官網文件【1】，看完後應該能完成 Gulp 的前置作業才對．．．

二、直接開始使用 Gulp

2.1 前置作業

在開始使用 Gulp 之前，先確認 3個套件是否已正安裝，這些套件包括：node、npm、npx，檢查的方法就是使用指令（終端機操作）：套件名稱加 --version。

1. node：

node --version

1. npm：

npm --version

1. npx：

npx --version

可以把--version改成-v。

檢查版本的目的是為了要確認是否已經正確的安裝套件，比較特別的應該是：npx，第一次聽到這個名詞的時候，有可能會和npm搞混，可以參考這篇【2】來釐清 npm 與 npx 之間的差別。

如果其中一項沒有安裝，則可以到 node.js 官網找套件安裝，建議選擇 LTS 版本會相對穩定。

2.2 安裝 Gulp 的指令與專案建立

為了讓電腦可以直接運行 Gulp，這裡要直接安裝 Gulp 的指令，安裝指令如下。

npm install --global gulp-cli

Gulp 順利安裝完後，可以創建一個專案的資料夾，並且切換路徑至該專案底下。

npx mkdirp gulp-project

cd gulp-project

這裡不要糾結npx mkdirp是什麼東西，最終目的就是要建立一個專案資料夾，並且切入到專案底下。

2.3 專案初始化

打開專案資料夾（根目錄）後，輸入初始化的指令。

npm init

初始化的步驟和 Webpack 相似，都會產生一個package.json檔案。在執行 npm init指令時，遇到要填寫資料的部分，可以先狂按 Enter 到底省略資料的填寫。

2.4 安裝 Gulp 套件與版本確認

這裡應該會有人感到疑惑（對！沒錯！那個人就是我），明明在 2.2 小節中，已經有安裝跟 Gulp 相關的東西了，為什麼這邊還要再安裝 Gulp 呢？在 2.2 小節安裝的東西是 Gulp 相關的指令，而這邊所要安裝的是在編譯程式碼時會用到的 Gulp 工具，使用指令如下。

npm install --save-dev gulp

關於--save-dev和--save的用法差異可以參考這篇文章【3】。

在裝完 Gulp 套件後，可以使用以下的指令來檢查安裝是否成功，使用指令如下。

gulp --version

判別的方式很簡單，只要確認 Local version 的版本號即可，如果 Gulp 套件安裝不成功，Local version 會顯示「Unknown」。

未安裝 Gulp ：

已安裝 Gulp：

2.5 Gulp 測試

這裡我們要先測試 Gulp 套件是否 Working，這裡可以在專案的根目錄底下，手動創建一個檔案gulpfile.js，並且輸入以下內容。

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

最後，在專案根目錄下開啟終端機輸入指令（什麼都不會發生）。

gulp

顯示結果：

到此為 Gulp 的 Quick Start 整個操作流程，與 Webpack 用法類似。

三、加入 Gulp 的 gulp-concat 套件

在 Gulp 中加入套件：gulp-concat。

3.1 gulp-concat 套件安裝

gulp-concat用途是串接檔案的內容，安裝指令如下。

npm install --save-dev gulp-concat

在之前建立的gulpfile.js中加入 task 任務，將 gulp.task 的 script 改成 concat ，然後修改輸入與輸出的路徑。

var concat = require('gulp-concat');
 
gulp.task('scripts', function() {
  return gulp.src('./**/*js')    //輸入資料來源路徑
    .pipe(concat('all.js'))      //輸出檔案名稱
    .pipe(gulp.dest('./dist/')); //輸出檔案路徑
});

.pipe可以想像是好幾個動作，動作合併起來成為一個任務task。特別注意 task 裡面的'scripts'，gulp 執行時會寫成 gulp scripts。

3.2 準備檔案

這裡可以加入一個 Source 資料夾，裡面放入兩支.js的檔案，然後我們要執行 Gulp 的指令，將兩支.js的檔案合併成一支all.is。

Source 內的檔案內容如下。

JavaScript：（a.js）

console.log("Hello");

JavaScript：（b.js）

console.log('World');

3.3 使用 gulp-concat

將gulpfile.js內容改寫，以符合專案的路徑。

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('concat', function () {
    return gulp
        .src('./source/*.js') //輸入資料來源路徑
        .pipe(concat('all.js')) //輸出檔案名稱
        .pipe(gulp.dest('./dist/')); //輸出檔案路徑
});

執行 Gulp 指令將專案合併。

gulp script

執行結果：（all.js）

console.log("Hello");
console.log('World');

四、推薦資源

1. 六角學院 - Gulp 基本運用與 Bower 之間整合

五、結論

本篇介紹了 Gulp 的環境架設，以及如何新增套件的方法。原本在學習 Gulp 之前感到有點抗拒學習，覺得它可能需要花很多的時間才能學得會，都是我一直沒有真正的去開始學習 Gulp 的原因，不過經過了這一次的操作後，發現它並沒有很困難，可能是因為之前有學過 Webpack 的關係吧？用法都很相似。若是對本篇內容哪裡感到不清楚的地方，建議可以直接看推薦資源裡面的課程，課程介紹的比較深入，看完應該會對 Gulp 有一定程度的認識，那麼今天的內容就到這邊結束，我們明天見！

六、參考資料

1. Quick Start | gulp.js
2. [NodeJS] npx 是什麼? 跟 npm 差在哪?
3. [NodeJs] npm --save 到底是什麼? --save-dev 不一樣嗎?